<template>
    <div class="chat-box">
        <header>聊天室 （在线：{{ count }}人）</header>
        
        <!-- 聊天组件 -->
        <div class="msg-box" ref="msg-box">
            <div class="more-log">
                <span v-if="showAllLog">已全部加载~</span>
                <span v-else @click="showLastLog">更多聊天</span>
            </div>
            <div
                 v-for="(i, index) in list"
                 :key="index"
                 class="msg"
                 :style="i.userId == userId ? 'flex-direction:row-reverse' :''"
            >
                <!-- 头像 -->
                <div class="user-head">
                    <img :src="i.avatar == '' ? avatar : i.avatar" height="30" width="30" :title="i.username">
                </div>
                
                <!-- 消息 -->
                <div class="user-msg">
                    <span :style="i.userId == userId ? 'float: right;' : 'float: left;'"
                          :class="i.userId == userId ? 'right' : 'left'">{{ i.content }}</span>
                </div>
            </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="input-box">
            <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()"/>
            <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div>
        </div>
    </div>
</template>

<script>

import luckyImg from '@/assets/img/sculpture/lucky.jpg'
import {page} from "@/api/chat/weChat"
let user = sessionStorage.getItem("manage-user") ? JSON.parse(sessionStorage.getItem("manage-user")) : {};

export default {
    name: "notice",
    data() {
        return {
            count: 0,
            ws: null,
            userId: user.id, // 当前用户 id
            username: user.nickname, // 当前用户昵称
            avatar: luckyImg, // 当前用户头像
            list: [], // 聊天记录得数据组
            contentText: "", // input 输入的值
            
            // 每次展示的数据条数
            pageNum: 1,
            pageSize: 10,
            showAllLog: false, // 已展示所有聊天数据
        }
    },
    
    mounted() {
        this.showMoreLog()
        this.initWebSocket()
    },
    
    destroyed() {
        // 离开界面时关闭 webSocket 连接
        this.ws.onclose(undefined)
    },
    
    methods: {
        // 发送聊天信息
        sendText() {
            let _this = this
            _this.$refs["sendMsg"].focus()
            if (!_this.contentText) {
                return
            }
            
            let params = {
                userId: _this.userId,
                username: _this.username,
                avatar: _this.avatar,
                msg: _this.contentText,
                count: _this.count
            };
            _this.ws.send(JSON.stringify(params)); // 调用WebSocket send()发送信息的方法
            _this.contentText = "";
            setTimeout(() => {
                _this.scrollBottom();
            }, 500);
        },
        
        // 进入页面创建websocket连接
        initWebSocket() {
            let _this = this;
            // 判断页面有没有存在websocket连接
            if (window.WebSocket) {
                var serverHot = window.location.hostname;
                let sip = '房间号'
                // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
                var url = 'ws://' + serverHot + ':9001/api' + '/groupChat/' + sip + '/' + user.id; // `ws://127.0.0.1/9001/api/groupChat/10086/聊天室`
                let ws = new WebSocket(url);
                _this.ws = ws;
                ws.onopen = function (e) {
                    console.log("服务器连接成功: " + url);
                };
                ws.onclose = function (e) {
                    console.log("服务器连接关闭: " + url);
                };
                ws.onerror = function () {
                    console.log("服务器连接出错: " + url);
                };
                ws.onmessage = function (e) {
                    //接收服务器返回的数据
                    let resData = JSON.parse(e.data)
                    _this.count = resData.count;
                    _this.list = [
                        ..._this.list,
                        {
                            userId: resData.userId,
                            username: resData.username,
                            avatar: resData.avatar,
                            content: resData.msg
                        }
                    ];
                };
            }
        },
        
        // 滚动条到底部
        scrollBottom() {
            let el = this.$refs["msg-box"];
            el.scrollTop = el.scrollHeight;
        },
        
        // 加载更多聊天信息
        showMoreLog() {
            page(this.pageNum, this.pageSize, {}).then(res => {
                if (res.data.records.length === 0) {
                    this.showAllLog = true
                    return
                }
                res.data.records.forEach((value, index) => {
                    this.list.unshift({
                        userId: value.userId,
                        username: value.username,
                        avatar: require('@/' + value.avatar),
                        content: value.msg
                    })
                })
            })
        },
        
        // 展示上一页数据
        showLastLog() {
            this.pageNum++;
            this.showMoreLog()
        },
    },
}
</script>

<style lang="scss" scoped>
.chat-box {
    margin: 0 auto;
    background: #fafafa;
    position: absolute;
    height: 80%;
    width: 100%;
    max-width: 700px;
    
    header {
        position: fixed;
        width: 100%;
        height: 3rem;
        background: #409eff;
        max-width: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: white;
        font-size: 1rem;
    }
    
    .msg-box {
        position: absolute;
        height: calc(100% - 6.5rem);
        width: 100%;
        margin-top: 3rem;
        overflow-y: scroll;
        
        .msg {
            width: 95%;
            min-height: 2.5rem;
            margin: 1rem 0.5rem;
            position: relative;
            display: flex;
            justify-content: flex-start !important;
            
            .user-head {
                min-width: 2.5rem;
                width: 20%;
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 50%;
                background: #f1f1f1;
                display: flex;
                justify-content: center;
                align-items: center;
                
                .head {
                    width: 1.2rem;
                    height: 1.2rem;
                }
                
                // position: absolute;
            }
            
            .user-msg {
                width: 80%;
                // position: absolute;
                word-break: break-all;
                position: relative;
                z-index: 5;
                
                span {
                    display: inline-block;
                    padding: 0.5rem 0.7rem;
                    border-radius: 0.5rem;
                    margin-top: 0.2rem;
                    font-size: 0.88rem;
                }
                
                .left {
                    background: #8daecf;
                    color: white;
                    animation: toLeft 0.5s ease both 1;
                }
                
                .right {
                    background: #53a8ff;
                    color: white;
                    animation: toright 0.5s ease both 1;
                }
                
                @keyframes toLeft {
                    0% {
                        opacity: 0;
                        transform: translateX(-10px);
                    }
                    100% {
                        opacity: 1;
                        transform: translateX(0px);
                    }
                }
                @keyframes toright {
                    0% {
                        opacity: 0;
                        transform: translateX(10px);
                    }
                    100% {
                        opacity: 1;
                        transform: translateX(0px);
                    }
                }
            }
        }
    }
    
    .input-box {
        padding: 0 0.5rem;
        position: absolute;
        bottom: 0;
        width: 97.7%;
        height: 3.5rem;
        background: #fafafa;
        box-shadow: 0 0 5px #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        input {
            height: 2.3rem;
            display: inline-block;
            width: 100%;
            padding: 0.1rem;
            border: none;
            border-radius: 0.2rem;
            font-size: 0.88rem;
        }
        
        input:focus {
            outline: 1px solid #60a6d4;
        }
        
        .btn {
            height: 2.3rem;
            min-width: 4rem;
            background: #e0e0e0;
            padding: 0.2rem;
            font-size: 0.88rem;
            color: white;
            text-align: center;
            border-radius: 0.2rem;
            margin-left: 0.5rem;
            transition: 0.5s;
            line-height: 35px;
        }
        
        .btn-active {
            background: #409eff;
        }
    }
}

.more-log {
    font-size: 14px;
    margin: 8px;
    color: #1780bf;
    cursor: pointer;
}
</style>
